/* Fractions, including frac2 to support sigma notation */

    span.frac {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
    }
    span.frac > sup, span.frac > sub {
        display: block;
        font: inherit;
        padding: 0 0.3em;
    }
    span.frac > sup {border-bottom: 0.08em solid;}
    span.frac > span {display: none;}
  
    span.frac2 {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        padding: 0 0; /*-0.3em -0.3em;*/
        margin: 0 0; /*0.3em 0.3em;*/
    }
    span.frac2 > sup, span.frac2 > sub {
        display: block;
        font: inherit;
        font-size: 18px;
        line-height: 11px;
        padding: 0 0; /*-0.3em -0.3em;*/
        margin: -0.5em -0.3em -0.6em;
    }
    span.frac2 > span {
        font-size: 60px;
        padding: 0 0; /*-0.3em -0.3em;*/
        margin: -0.8em 0; /*0.3em;*/
    }

    /* For fraction in parenthesis (or other text before and after the fraction maybe?) */

    span.largerText {
        display: inline-block;
        font-size: 200%;
        text-align: center;
        vertical-align: middle;
    }



/* The Modal (background) */
 
    .modal,
    .modal2 {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 30px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }
    .modal2 {
        padding-top: 0px;
        display: block;
        background-color: lightgray;
    }
 
/* Modal Content, Header, and Footer */
 
    .modal-content,
    .modal2-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        height: auto;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }

    .modal2-content {
        width: 100%;
        height: 100%;
    }
 
    .modal-header,
    .modal2-header {
        padding: 2px 16px;
        background-color: #7a79ce;
        color: white;
        border-bottom: 2px solid black;
        text-align: center;
    }

    .modal2-header {
        height: 8%;
    }
 
    .modal-body,
    .modal2-body {
        padding: 24px 46px;
        font-size: 22px;
    }

    div.smallerText {
        font-size: 18px;
    }

    div.halfLine {
        height : 6px;
        /*border: 1px dashed black;*/
    }

    span.fixedFont {
        font-size: 18px;
        font-family: 'Courier New', Courier, monospace;
    }

    .modal2-body {
        height: 45%;
        overflow: auto;
    }
 
    .modal-footer,
    .modal2-footer {
        padding: 10px 46px;
        background-color: #5cb85c;
        font-size: 17px;
        color: white;
    }

    .modal2-footer {
        height: 37%;
        background-color: lightgrey;
        color: black;
    }
 
/* The Close Button (and equivalent Start button) */
 
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }
 
    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    button.startup {
        float : right;
        background-color: #7a79ce;
        border: medium;
        border-radius: 5px;
        padding: 8px 14px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        max-width:45%;
    }
 
    
 /*  The main application */

    .left {
        width: 66%;
        height:90%;
        float:left;
        margin-top: 6px;
    }

    .right{
        width: 32%;
        height:90%;
        float:right;
        margin-top: 6px;
    }

    div.inlineText {
        float: left;
        font-size: 14px;
    }
 
    div.inlineRJ {
        /* try this */
        float: left;
        font-size: 14px;
        width: 30%;
        text-align: right;
    }
 
    #shortExplanation {
        font-size: 19px;
        padding-bottom: .5em; /**/ /* changed here, was 4px */
/**/ /* changed here */
/*        border-bottom: 2px solid black;*/
    }
   
    .answer,
    .centerAnswer,
    .wideAnswer {
        width: 12%;
        float: left;
        font-size: 14px;
        font-weight: 700;
        text-align:center; /*right;*/
        margin: 0px 0px 8px 3px;
    }
 
    .centerAnswer {
        text-align: center;
        width: 20%;
    }

    div.answer,
    div.centerAnswer {
        border: 1px solid black;
        height: 1.3em;
    }

    .wideAnswer {
        width:30%;
    }
   
    div.keyboard {
        float: left;
        margin-left:2%;
        width:96%;
        margin-top:5%;
    }
 
    div.results {
        float: left;
        width:96%;
        margin-left: 2%;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-right: 2%;
        min-height: 5.3em;
    }
   
    #solution {
        color: white;
    }
   
    .nKey,
    .nKeyNarrow,
    .nKeyPorC,
    .nKeyPorCNarrow,
    .nKeyLargerFont,
    .nKeyWide {
        width:28%;
        text-align:center;
        margin: .1em;
        background: #00d9ff;
        border-radius: 5px;
        font-size: 16px;
        font-weight:bold;
    }
 
    .nKeyLargerFont {
        font-size:20px;
        font-weight: bolder;
    }
 
    .nKeyWide {
        width:48%;
        font-size:15px;
        /**/ /* changed here */
        padding-top: .2em;
        padding-bottom: .2em;
    }
 
    .nKeyPorC,
    .nKeyPorCNarrow {
        background: #00d9aa;
    }

    .nKeyPorCNarrow {
        width: 21%;
    }

    .nKeyNarrow {
        width: 21%;
        font-family: 'Times New Roman', Times, serif;
        font-weight: bold;
    }

    button {
        background: #0084ff;
        border: medium;
        border-radius: 5px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: bold;
        color: #fff;
        max-width:45%;
    }
   
    button.x3x2x {
        width:28%;
        text-align:center;
        margin: .1em;
        background: #00d9ff;    /* was 00d9ff then 00aaff*/
        border-radius: 5px;
        font-size: 16px;
        font-weight:bold;
        color: black;
        padding: 3px;
    }

    button.checkNext {
        float : left;
        opacity : 1.0;
    }

    button#showStart {
        max-width: 95%;
    }

    button.someAll {
        background-color: #7a79ce;
        color: white;
        width:28%;
    }
 
    .arrowButt {
        background: rgb(49, 218, 49);
        border: medium;
        border-radius: 5px;
        padding: 4px 7px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        width: 30%;
        float:left;
    }
 
    div#stepList {
        width: 100%;
        margin-top: -5px; 
        /*margin-left: 2%;*/
        float: left;
        border-bottom: 1px solid black;
        padding-bottom: 3px;
        font-size: 19px; /**/ /* maybe change this back - it was 18px*/
        font-weight: bold;
        color: blueviolet;
        /*min-height: 68px;  /**/ /* maybe make this larger, perhaps 120 or 140??? */
    }
 
    div.problem {
        width: 96%;
        margin-top: 5px; 
        margin-left: 2%;
        float: left;
        border-bottom: 1px solid black;
        font-size: 19px; /**/ /* maybe change this back - it was 18px*/
        min-height: 68px;  /**/ /* maybe make this larger, perhaps 120 or 140??? */
    }
 
    div.soln { 
        width: 96%; 
        margin-left: 2%;
        clear: left;
        float: left;
        font-size: 15px;
        min-height: 125px;
        /**/ /*changed here*/
        padding-top: .3em;
    }
 
    div.answers {
        float: left;  
        width: 96%;
        margin-left: 2%;
    }
 
    div.clearLeft, div.clearLeftUL {
        clear: left;
        border: 2px 0px 2px 0px;
    }

    div.clearLeftUL {
        border-bottom: 3px solid black;
        width: 65%;
        margin-top: -4px;
        margin-bottom: 6px;
        /*float: right;*/
        margin-left: 28%;
        /*margin-right: 8%;*/

    }

    #outmsg {
        color:blue;
        font-size:1.5em;
        clear:left;
        /*border: 2px dashed black;*/
        border: 3px 3px;
    }
 
    div.buckets {
         /*border: 1px dashed black;*/
    }

    span.buckets {
        /*border: 1px solid red;*/
    }
  
    h4 {
        text-align: center;
        font-size: 20px;
/**/ /* changed here */
        border-bottom: 2px solid black;
        padding-bottom: .1em;
        margin: .05em;  /* was 10px;*/
}
 
    #wholeBody {
        min-width: 400px;
        min-height: 400px;
    }
 
    #footer {
        border-top: 2px solid black;
        padding-top: 4px;
        clear: both;
        text-align: right;
    }
 

    /* The induction table */

    /*
            #in1, #in2, #in3 {
              width: 80%;
        }
        #in1div, #in2div, #in3div{
            width:15%;
            float: left;
        }
         
        div.inlineText {
            float: left;
            font-size: 13px;
        }
        
        input {
            text-align:right;
        }
        
        div.keyboard {
            float:left;
            width:40%;
        }
        
        div.solution {
            float: left;
            width: 45%;
        }

        div.spacer {
            width:10%;
            height: 300px;
            float: left;
            clear: left;
            color: white;
        }
        
        .nKey {
            width:15%;
            text-align:center;
            margin: .1em;
            background: #00d9ff;
            border-radius: 5px;
        }
        
        .nKeyWide {
            width:30%;
            text-align:center;
            margin: .1em;
            background: #00d9ff;
            border-radius: 5px;
        }
            
        button {
            background: #0084ff;
            border: medium;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
            
        .arrowButt {
            background: rgb(49, 218, 49);
            border: medium;
            border-radius: 5px;
            padding: 4px 7px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            width: 13%;
            float:left; 
        }
        
        #button {
            background: #0084ff;
            border: medium;
            border-radius: 5px;
            padding: 8px 14px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
        }
           
        .row {
            padding-top: 10px;
            padding-left: 20px;
        }
*/
    div.larger {
        width: 96%;
        height: 120px;
        overflow-y: scroll;
        float: left;
        border-bottom: 1px solid black;
        font-size: 12px;
        margin-left: 2%;

    }

div.indHeader {
/*            width: 90%;
    float: left;
*/
    background-color: beige;

    width: 96%;
    margin-top: -5px; 
    margin-left: 2%;
    float: left;
    border-bottom: 1px solid black;
/*            font-size: 18px;*/


}
/* 
div.smaller {
    width: 5%;
    height: 280px;
    float: left;
    color: white;
}
*/ 
div.indNCol {
    width: 15%;
    text-align: center;
    float:left;
    clear: left;
}

div.indRecCol {
    width: 35%;
    text-align: left;
    float: left;
}

div.wideIndRecCol {
    width: 60%;
    text-align: left;
    float: left;
}

div.narrowIndRecCol {
    width: 10%;
    text-align: left;
    float: left;
}

div.indClCol {
    width: 35%;
    text-align: left;
    float: left;
}

div.wideIndClCol {
    width: 60%;
    text-align: left;
    float: left;
}

div.narrowIndClCol {
    width: 10%;
    text-align: left;
    float: left;
}

div.indClColHeader {
    width: 30%;
    text-align: left;
    float: left;
}

div.wideIndClColHeader {
    width: 60%;
    text-align: left;
    float: left;
}

div.indEqCol {
    width: 10%;
    text-align: center;
    float: left;
}

div.indEqColHeader {
    width: 15%;
    text-align: center;
    float: left;
}

p.highlightedPara {
    color: blue;
    font-weight: bolder;

}